<template>
	<view class="container">
		<view class="tip"  v-if="info.status === 0 || info.status === 1 || info.status === 2">
			<u-alert :title="info.status === 0 ? '审核中' : info.status === 1 ? '审核通过' : '审核失败'" :type="info.status === 0 ? 'warning' : info.status === 1 ? 'success' : 'error'" :description = "info.status === 2 ? info.prompt : ''"></u-alert>
		</view>
		
		<u-form labelPosition="left" :model="formData" :rules="rules" ref="uForm">
			<view class="form-item">
				<u-form-item label="入圈时间" prop="join_time" labelWidth="120" borderBottom>
					<u-input v-model="formData.join_time" border="none" type="text" placeholder="请输入">
						<template #suffix>
							<text>年</text>
						</template>
					</u-input>
				</u-form-item>
			</view>
			<view class="form-item">
				<u-form-item label="是否有毅力保持更新" prop="has_perseverance" labelWidth="150" borderBottom>
					<u-radio-group v-model="formData.has_perseverance">
						<u-radio :customStyle="{marginRight: '20rpx'}" v-for="(item, index) in radiolist" :key="index"
							:label="item.label" :name="item.value">
						</u-radio>
					</u-radio-group>
				</u-form-item>
			</view>
			<view class="form-item">
				<u-form-item label="是否深度了解该圈" prop="is_deep_understanding" labelWidth="150" borderBottom>
					<u-radio-group v-model="formData.is_deep_understanding">
						<u-radio :customStyle="{marginRight: '20rpx'}" v-for="(item, index) in radiolist" :key="index"
							:label="item.label" :name="item.value">
						</u-radio>
					</u-radio-group>
				</u-form-item>
			</view>

			<!-- <view class="form-item">
				<picker mode="selector" :range="actions" range-key="label"
					@change=" e => change(e, 'circle_classification_id', 'actions')">
					<u-form-item label="归属类别" prop="circle_classification_id" labelWidth="80" borderBottom
						@click="showClass = true; hideKeyboard()">
						<u--input
							:value="formData.circle_classification_id ? actions.find(i=>i.value === formData.circle_classification_id).label : ''"
							disabled disabledColor="#ffffff" placeholder="请选择" border="none"></u--input>
			
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
				</picker>
			</view> -->
			<view class="form-item">
				<u-form-item label="自我介绍" prop="self_introduction" labelWidth="80">
					<u--textarea placeholder="写出你在本圈的经验" v-model="formData.self_introduction" border="none"></u--textarea>
				</u-form-item>
			</view>

			<view class="form-item" style="margin-top: 20rpx;" v-if="Is_it_displayed === 0" @click="toPage">
				<u-form-item prop="circle_classification_id">
					<view style="color:#e4393c">知识变现前，请先实名认证</view>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
			</view>
		</u-form>

		<view class="bottom-btn" @click="submit" v-if="Is_it_displayed != 0">提交</view>
	</view>
</template>

<script>
	import {
		uploadImg
	} from '@/common/upload.js'
	import {
		circle_classification,
		circle_view_add,
		circle_view
	} from '@/common/http/api.js'
	export default {
		props: {
			Is_it_displayed: {
				type: Number,
				default: () => 0
			},
			circle_id: {
				type: Number,
				default: () => 0
			},
		},
		data() {
			return {
				radiolist: [{
						value: 0,
						label: '否'
					},
					{
						value: 1,
						label: '是'
					}
				],
				formData: {
					join_time: '',
					has_perseverance: '',
					is_deep_understanding: '',
					self_introduction: ''
				},
				rules: {
					
					target_audience: {
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							return !(this.formData.type === 1 && !this.formData.target_audience)
						},
						message: '请输入',
						trigger: ['blur', 'change'],
					},
					join_time: {
						type: 'string',
						required: true,
						message: '请输入',
						trigger: ['blur', 'change'],
					},
					has_perseverance: {
						type: 'number',
						required: true,
						message: '请选择',
						trigger: ['blur', 'change'],
					},
					is_deep_understanding: {
						type: 'number',
						required: true,
						message: '请选择',
						trigger: ['blur', 'change'],
					},
					self_introduction: {
						type: 'string',
						required: true,
						message: '请输入',
						trigger: ['blur', 'change'],
					}
				
				},
				info: {},
				
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		created() {
			console.log('圈子id', this.circle_id)
			this.init()
		},
		methods: {
			toPage(){
				uni.navigateTo({
					url:'/pagesA/authenticationCenter/authenticationCenter'
				})
			},
			init(){
				circle_view({circle_id: this.circle_id}).then(res=>{
					this.info = res.data
					if(res.data.join_time) {
						this.formData.join_time = res.data.join_time ? res.data.join_time.toString() : ''
						this.formData.has_perseverance = res.data.has_perseverance
						this.formData.is_deep_understanding = res.data.is_deep_understanding
						this.formData.self_introduction = res.data.self_introduction
						this.formData.id = res.data.id
					}
				})
			},
			delItem(index) {
				this.formData.identity.splice(index, 1)
			},
			identityChange(e, it) {
				console.log('e', e)
			},
			open() {
				this.identityValue = ''
				this.is_add = true
			},
			save() {
				this.formData.identity.push({
					name: this.identityValue,
					status: 0
				})
				this.del()
			},
			del() {
				this.identityValue = ''
				this.is_add = false
			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					// uni.$u.toast('校验通过')
					uni.showLoading({
						mask: true,
						title: "提交中"
					})
					let data = {
						...this.formData,
						circle_id: this.circle_id
					}
					circle_view_add(data).then(res => {
						uni.hideLoading()
						uni.$u.toast("提交成功")
						this.init()
						// setTimeout(() => {
						// 	uni.switchTab({
						// 		url: '/pages/index/index'
						// 	})
						// }, 1500)
					})
				})
			},
			change(e, field, range) {
				console.log('e', e)
				this.formData[field] = this[range][e.detail.value].value
			},
			upload(field) {
				uploadImg().then(res => {
					console.log('res', res)
					this.formData[field] = res.data.url
				})
			},
			hideKeyboard() {
				uni.hideKeyboard()
			},
			classSelect(e) {
				this.formData.calss = e.name
			},
			identitySelect(e) {
				this.formData.identity = e.name
			},
			certificationSelect(e) {
				this.formData.certification = e.name
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					let item = this[`fileList${event.name}`][fileListLen];
					this[`fileList${event.name}`].splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: "success",
							message: "",
							url: result,
						})
					);
					fileListLen++;
				}
			},
		},

	}
</script>

<style lang='scss' scoped>
	.tip {
		width: 100%;
		box-sizing: border-box;
		padding:0 30rpx;
		background: #fff;
	}
	.layout-img-list {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		margin-top: 10rpx;

		&>view {
			margin-right: 15rpx;
		}
	}

	.layout-img-list-add {
		width: 151rpx;
		height: 151rpx;
		border-radius: 20rpx;
		/* 	border: 1px solid #999999; */
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.layout-img-list-item {
		width: 151rpx;
		height: 151rpx;
		position: relative;

		image {
			width: 100%;
			height: 100%;
		}

		.layout-img-list-item-image {
			border-radius: 20rpx;
		}

		.layout-img-list-item-del {
			width: 38rpx;
			height: 38rpx;
			position: absolute;
			top: -15rpx;
			right: -15rpx;
			z-index: 2;
		}
	}

	.container {
		background-color: #f7f7f9;
		min-height: 100vh;
		padding-bottom: 30rpx;

		.form-item {
			background-color: #fff;
			padding: 0 40rpx;
		}

		.bottom-btn {
			width: 80%;
			text-align: center;
			background-color: #6aaf74;
			color: #fff;
			padding: 20rpx 0;
			margin: 0 auto;
			border-radius: 50rpx;
			margin-top: 20rpx;
		}
	}

	.card {
		border-radius: 20rpx;
		background-color: #fff;
		padding: 20rpx;

		.card-title {
			font-size: 28rpx;
			color: #000;
			border-bottom: 1px solid #eee;
			padding-bottom: 20rpx;
		}

		.description {
			font-size: 24rpx;
			color: #ccc;
			margin-left: 10rpx;
			margin-right: 10rpx;
		}

		.card-switch {
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #000;
		}

		.add-btn {
			margin-top: 10rpx;
			width: 400rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background-color: #ededed;
			color: #8f8f8f;
		}
	}

	.add {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 10rpx 0;

		.add-input {
			flex: 1;
			margin-right: 10rpx;
			height: 60rpx;

			input {
				width: 100%;
				height: 100%;
				box-sizing: border-box;
				padding: 0 10rpx;
				font-size: 22rpx;
				color: #000;
				border: 1rpx solid #ccc;
				border-radius: 10rpx;
			}

			.add-input-plac {
				font-size: 22rpx;
				color: #000;
			}
		}

		.add-r {
			display: flex;
			align-items: center;
		}

		.tx {
			color: #8f8f8f;
		}
	}

	.setting {
		.add-input {
			width: 40%;
			flex: none;
		}

		.add-r {}
	}
</style>